<template>
  <div class="process-rawcloth">
    <div class="plan">
      <div class="title" >生产计划</div>
      <el-row style="margin: 5px 0px; height: 29px">
        <span
          style="
            vertical-align: middle;
            display: inline-block;
            padding-top: 2px;
            font-size: 13px;
          "
          >查询条件：</span
        >
        <el-tag
          style="margin: 0px 5px 5px 0px"
          v-for="tag in tags"
          :key="tag.prop || tag.start + '_' + tag.end"
          closable
          @close="removeTag(tag)"
        >
          {{ tag.desc }}：{{ tag.value }}
        </el-tag>
      </el-row>
      <el-form
        size="small"
        :inline="true"
        :model="query"
        label-width="45px"
        style="margin-bottom: 10px; position: relative; z-index: 100"
      >
        <el-row>
          <el-form-item
            label="编号"
            style="width: 150px"
            :style="elFormItemStyle"
          >
            <el-input v-model="query.plan_id"></el-input>
          </el-form-item>

          <el-form-item
            label="月份"
            style="width: 120px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.plan_month" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item"
                :value="item"
                v-for="item in yearMonthList"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="类型"
            style="width: 120px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.plan_type" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in ddo.prodTypes"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item :style="elFormItemStyle">
            <el-button type="primary" @click="getPage(1)">查询</el-button>
          </el-form-item>

          <el-form-item v-show="queryMore" :style="elFormItemStyle">
            <el-tooltip effect="dark" content="简化" placement="top-start">
              <el-button
                :icon="Fold"
                circle
                @click="queryMore = false"
              ></el-button>
            </el-tooltip>
          </el-form-item>
          <el-form-item v-show="!queryMore" :style="elFormItemStyle">
            <el-tooltip effect="dark" content="更多筛选" placement="top-start">
              <el-button
                :icon="Expand"
                circle
                @click="queryMore = true"
              ></el-button>
            </el-tooltip>
          </el-form-item>
        </el-row>

        <transition name="slide-fade">
          <div
            v-show="queryMore"
            style="
              position: absolute;
              top: 48px;
              left: 0px;
              background-color: white;
              box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1);
              border-radius: 5px;
            "
          >
            <el-row>
              <el-form-item
                label="客户"
                style="width: 230px"
                :style="elFormItemStyle"
              >
                <el-select v-model="query.plan_cus" @change="getPage(1)">
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    :label="item.info_name"
                    :value="item.info_id"
                    v-for="item in cusList"
                    :key="item.info_id"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label="规格"
                style="width: 230px"
                :style="elFormItemStyle"
              >
                <el-select v-model="query.plan_std" @change="getPage(1)">
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    :label="item.info_name"
                    :value="item.info_id"
                    v-for="item in stdList"
                    :key="item.info_id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="花色"
                style="width: 230px"
                :style="elFormItemStyle"
              >
                <el-select v-model="query.plan_color" @change="getPage(1)">
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    :label="item.info_name"
                    :value="item.info_id"
                    v-for="item in colorList"
                    :key="item.info_id"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label="计划序号"
                style="width: 230px"
                :style="elFormItemStyle"
              >
                <el-col :span="11">
                  <el-input
                    style="width: 70px"
                    v-model="query.plan_xh_start"
                    type="number"
                    min="1"
                    max="9999"
                  ></el-input>
                </el-col>
                <el-col :span="2" style="text-align: center">
                  <span style="color: #cccccc"> - </span>
                </el-col>
                <el-col :span="11">
                  <el-input
                    style="width: 70px"
                    v-model="query.plan_xh_end"
                    type="number"
                    min="1"
                    max="9999"
                  ></el-input>
                </el-col>
              </el-form-item>

              <el-form-item
                label="产量"
                style="width: 280px"
                :style="elFormItemStyle"
              >
                <el-col :span="11">
                  <el-form-item style="width: 110px">
                    <el-input-number
                      v-model="query.plan_num_start"
                      :min="0"
                      :max="9999999"
                      controls-position="right"
                      :precision="0"
                      :step="1"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="text-align: center">
                  <span style="color: #cccccc"> - </span>
                </el-col>
                <el-col :span="11">
                  <el-form-item style="width: 110px">
                    <el-input-number
                      v-model="query.plan_num_end"
                      :min="0"
                      :max="9999999"
                      controls-position="right"
                      :precision="0"
                      :step="1"
                    />
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-row>
          </div>
        </transition>
      </el-form>

      <el-table
        :data="page.list"
        :stripe="true"
        :fit="true"
        :max-height="tableMaxHeight"
        size="small"
        style="width: 100%; flex: auto"
      >
        <el-table-column fixed="left" prop="plan_id" label="编号" width="110" />
        <el-table-column
          fixed="left"
          prop="plan_num"
          label="计划量(米)"
          width="80"
        />
        <el-table-column
          fixed="left"
          prop="group_total"
          label="投坯量(米)"
          width="80"
        />
        <el-table-column
          fixed="left"
          prop="plan_remainder"
          label="剩余量(米)"
          width="80"
        />
        <el-table-column prop="plan_month" label="计划月份" width="80" />
        <el-table-column prop="plan_xh" label="序号" width="60" />
        <el-table-column prop="plan_type" label="产品类型" width="80">
          <template #default="{ row }">
            {{ ddo.text("prodTypes", row.plan_type) }}
          </template>
        </el-table-column>
        <el-table-column prop="cus_name" label="产品客户" />
        <el-table-column prop="std_name" label="产品规格" />
        <el-table-column prop="color_name" label="产品花色" />

        <el-table-column fixed="right" label="操作" width="60">
          <template #default="{ row }">
            <el-button              
              size="small"
              type="primary"
              @click="openAdd(row)"
              >投坯</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 22px"
        small
        layout="sizes,prev, pager, next, jumper, ->, total"
        :total="page.total"
        v-model:page-size="query.pageSize"
        v-model:current-page="query.pageNum"
        :page-sizes="[1, 3, 5, 10, 15, 20, 30, 100]"
        @current-change="getPage"
        @size-change="getPage(1)"
      />
    </div>
    <div class="process">
      <div class="title" >生产投坯</div>
      <group :yearMonthList="yearMonthList" :infoList="infoList" ref="groupRef" ></group>
    </div>
  </div>

  <!-- 新增 -->
  <group-add ref="groupAddRef" @ok="refreshData" ></group-add>

  <!-- 修改 -->
  <!-- <plan-upd ref="planUpdRef" @ok="getPage(page.current)"></plan-upd> -->

  <!-- <plan-details ref="planDetailsRef"></plan-details> -->
</template>

<script setup >
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tip, get, post, put, del, ddo, elConfirm } from "@/common";
import { Expand, Fold } from "@element-plus/icons-vue";

const elFormItemStyle = { margin: "0px 16px 15px 0px" };

const tableMaxHeight = computed(() => ddo.homeElCardBodyHeight - 200);

const queryMore = ref(false);

//获取年月列表
const yearMonthList = ref([]);
const getYearMonthData = () => {
  get("/plan/manager/year-month-list").then((result) => {
    yearMonthList.value = result.data.list;
  });
};
getYearMonthData();

//获取基础信息
const infoList = ref([]);
const cusList = computed(() =>
  infoList.value.filter((item) => item.info_type === 1)
);
const stdList = computed(() =>
  infoList.value.filter((item) => item.info_type === 2)
);
const colorList = computed(() =>
  infoList.value.filter((item) => item.info_type === 3)
);
const getInfoList = () => {
  get("/plan/manager/info").then((result) => {
    infoList.value = result.data;
  });
};
getInfoList();

//多选处理
const multipleSelection = ref([]);
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
};

//获取列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  plan_id: "",
  plan_xh_start: 0,
  plan_xh_end: 0,
  plan_month: "", //计划月份
  plan_cus: "",
  plan_std: "",
  plan_color: "",
  plan_num_start: 0, //计划查询范围起始数量值
  plan_num_end: 0, //计划查询范围结束数量值
  plan_type: "", // 产品类型
  plan_date_start: "", //计划查询范围起始下达时间
  plan_date_end: "", //计划查询范围结束下达时间
  plan_person: "", //计划下达人
  plan_status: "", //计划是否下达
});

//条件标签元数据
const getInfoName = (propVal, someList) => {
  const theItem = someList.value.find((item) => item.info_id == propVal);
  return theItem && theItem.info_name;
};
const queryTagMeta = [
  { range: false, desc: "计划编号", prop: "plan_id" },
  { range: true, desc: "生产序号", start: "plan_xh_start", end: "plan_xh_end" },
  { range: false, desc: "计划月份", prop: "plan_month" },
  {
    range: false,
    desc: "产品客户",
    prop: "plan_cus",
    getValue: (propVal) => getInfoName(propVal, cusList),
  },
  {
    range: false,
    desc: "产品规格",
    prop: "plan_std",
    getValue: (propVal) => getInfoName(propVal, stdList),
  },
  {
    range: false,
    desc: "产品花色",
    prop: "plan_color",
    getValue: (propVal) => getInfoName(propVal, colorList),
  },
  {
    range: true,
    desc: "计划产量",
    start: "plan_num_start",
    end: "plan_num_end",
  },
  {
    range: false,
    desc: "产品类型",
    prop: "plan_type",
    getValue: (propVal) => ddo.text("prodTypes", propVal),
  },
  {
    range: true,
    desc: "下达日期",
    start: "plan_date_start",
    end: "plan_date_end",
  },
  { range: false, desc: "下达人", prop: "plan_person" },
  {
    range: false,
    desc: "是否下达",
    prop: "plan_status",
    getValue: (propVal) => (propVal ? "已下达" : "未下达"),
  },
];

//以选择条件标签
const tags = computed(() => {
  const arr = [];

  queryTagMeta.forEach((meta) => {
    if (meta.range) {
      (query[meta.start] || query[meta.end]) &&
        arr.push({
          ...meta,
          value: meta.getValue
            ? meta.getValue(query[meta.start], query[meta.end])
            : `${query[meta.start]} ~ ${query[meta.end]}`,
        });
    } else {
      (query[meta.prop] || query[meta.prop] === false) &&
        arr.push({
          ...meta,
          value: meta.getValue
            ? meta.getValue(query[meta.prop])
            : query[meta.prop],
        });
    }
  });
  return arr;
});

const removeTag = (tag) => {
  if (tag.range) {
    if (typeof query[tag.start] === "number") {
      query[tag.start] = 0;
      query[tag.end] = 0;
    } else {
      query[tag.start] = "";
      query[tag.end] = "";
    }
  } else {
    if (typeof query[tag.start] === "number") {
      query[tag.prop] = 0;
    } else {
      query[tag.prop] = "";
    }
  }
  getPage(1);
};

const page = ref({ total: 0 });

const getPage = (pageNo) => {
  query.pageNum = pageNo || 1;
  get("/process/plan", query).then((result) => {
    page.value = result.data;
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
  });
};

getPage(1);

//新增
// import PlanAdd from "./plan-add.vue";
// const planAddRef = ref();
// const openAdd = () => {
//   planAddRef.value.open();
// };

//修改
import GroupAdd from "./group-add.vue";
const groupAddRef = ref();
const openAdd = (row) => {
  groupAddRef.value.open(row);
};

//删除
const execDel = (row) => {
  elConfirm("提示", "您确定删除该计划吗？").then(() => {
    del(`/plan/manager/${row.plan_id}`).then((result) => {
      getPage(page.value.current);
      tip.success("删除计划成功！");
    });
  });
};

const execMultiDel = () => {
  if (multipleSelection.value.length == 0) {
    tip.error("请选择计划数据！");
    return;
  }
  elConfirm("提示", "您确定删除选中的计划吗？").then(() => {
    const ids = [];
    multipleSelection.value.forEach((row) => ids.push(row.plan_id));
    del(`/plan/manager`, ids).then((result) => {
      getPage(page.value.current);
      tip.success("删除计划成功！");
    });
  });
};

//下达
const execConfirm = (row) => {
  put(
    `/plan/manager/confirm/${row.plan_id}`,
    {},
    { title: "提示", message: "您确定下达该计划吗？" }
  ).then((result) => {
    getPage(page.value.current);
    tip.success("下达计划成功！");
  });
};

//查看详情
import PlanDetails from "./group-details.vue";
const planDetailsRef = ref();
const openDetails = (row) => {
  planDetailsRef.value.open(row);
};

//分组数据
import Group from './group.vue';
const groupRef = ref();

const refreshData = ()=>{
  getPage(page.value.current);
  groupRef.value.refresh();
}


</script>

<style scoped>
.x {
}
.process-rawcloth {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.process-rawcloth > .plan , .process-rawcloth > .process{
  width: 48%;
  flex: none;
  padding:0px 10px 10px;
  border:1px dotted #b1b3b8;
  border-radius: 5px;
}

.process-rawcloth > .plan > .title,.process-rawcloth > .process > .title{
  padding:7px 0px 5px;border-bottom:1px dotted #DCDFE6;
  font-size:13px;font-weight: bold;
  color:#606266;
  
}

.slide-fade-enter-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-leave-active {
  /* transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); */
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(300px);
  opacity: 0;
}
</style>